<template>
    <div>
        <div class="test" style="height: 800px">
            <!-- swiper2 Thumbs -->
            <div class="ctrl" style="float: left;width: 20%;height: 100%">
                <swiper :options="swiperOptionThumbs" class="gallery-thumbs" ref="swiperThumbs">
                    <swiper-slide v-for="val in imgList" :key="val.ID">
                        <img :src="config.resourceURL+val.ResourceName" alt="">
                    </swiper-slide>
                </swiper>
            </div>
            <!-- swiper1 -->
            <div class="main" style="float: left;width: 80%;height: 100%">
                <swiper :options="swiperOptionTop" class="gallery-top" ref="swiperTop">
                    <swiper-slide v-for="val in imgList" :key="val.ID">
                        <img :src="config.resourceURL+val.ResourceName" alt="">
                    </swiper-slide>
                </swiper>
            </div>
        </div>
    </div>
</template>

<script>
    import {mapGetters, mapActions} from 'vuex'
    export default {
        props: ['imgList'],
        computed: {
            ...mapGetters([
                "config"
            ])
        },
        data() {
            return {
                swiperOptionTop: {
                    notNextTick: true,
                    direction: 'vertical',
                    mousewheelControl: true,
                    zoom: true
                },
                swiperOptionThumbs: {
                    notNextTick: true,
                    spaceBetween: 10,
                    centeredSlides: true,
                    slidesPerView: 'auto',
                    direction: 'vertical',
                    touchRatio: 0.2,
                    mousewheelControl: true,
                    slideToClickedSlide: true,
                }
            }
        },
        mounted() {
            const swiperTop = this.$refs.swiperTop.swiper
            const swiperThumbs = this.$refs.swiperThumbs.swiper
            swiperTop.params.control = swiperThumbs
            swiperThumbs.params.control = swiperTop
        }
    }
</script>

<style scoped>
.swiper-container {
    /*background-color: #000;*/
}

.swiper-slide {
    background-size: cover;
    background-position: center;
}

.el-dialog__body {
    height: 80%;
}


.gallery-top {
    height: 100%;
    width: 80%;
    margin: 0 auto;
}

.gallery-thumbs {
    height: 100%;
    width: 100%;
}

.gallery-thumbs .swiper-slide {
    width: 60%;
    margin: 0 auto;
    height: 20%;
    border: 1px solid #000;
    opacity: 0.4;
}

img {
    display: block;
    width: 100%;
    height: 100%;
}

.gallery-thumbs .swiper-slide-active {
    opacity: 1;
}
</style>